<style lang="scss" scoped>
  .form {
    padding-left: 100px;
    align-items: center;
    .form_item {
      width: 220px;
    }
  }

</style>
<style lang="scss">
  .form {
    .el-input__inner {
      width: 150px;
    }
  }
</style>
<template>
  <div class="ui-page">
    <div class="ui-list ui-box">
      <div class="box-header ui-list-header">
        <div>{{this.$route.query.title}}宿舍服务详情</div>
        <div>
          <el-button type="primary" size="mini" @click="back">返回</el-button>
        </div>
      </div>
      <div class="ui-detail-box">
        <el-form class="ui-search-form" label-width="120px">
          <el-form-item label="宿舍楼">
            <el-input size="mini" v-model="dsItem.buildingNo" disabled></el-input>
          </el-form-item>
          <el-form-item label="宿舍号">
            <el-input size="mini" v-model="dsItem.dorNo" disabled></el-input>
          </el-form-item>
          <el-form-item label="月份" prop="dsMonth">
            <el-date-picker
              v-model="dsItem.dsMonth"
              type="month"
              placeholder="选择月"
              class="ui-item-reset"
              size="small"
              value-format="yyyy-MM-dd"
              disabled>
            </el-date-picker>
          </el-form-item>
          <el-form-item label="宿舍卫生等级" prop="dsDorHygiene">
            <el-select placeholder="请选择" size="mini" class="ui-item-reset" v-model="dsItem.dsDorHygiene"
                       :disabled="editFlag">
              <el-option label="优" :value="1"></el-option>
              <el-option label="良" :value="2"></el-option>
              <el-option label="差" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="宿舍卫生情况" prop="dsDorHygieneDetail">
            <el-input size="mini" class="item_reset" v-model="dsItem.dsDorHygieneDetail" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="电费(元)" prop="dsElectricBill">
            <el-input size="mini" class="item_reset" v-model="dsItem.dsElectricBill" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="电费详情(度)" prop="dsElectricBillDetail">
            <el-input size="mini" class="item_reset" v-model="dsItem.dsElectricBillDetail" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="水费(元)" prop="dsWaterBill">
            <el-input size="mini" class="item_reset" v-model="dsItem.dsWaterBill" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="水费详情(吨)" prop="dsWaterBillDetail">
            <el-input size="mini" class="item_reset" v-model="dsItem.dsWaterBillDetail" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="网费(元)" prop="dsInternetBill">
          <el-input size="mini" class="item_reset" v-model="dsItem.dsInternetBill" :disabled="editFlag"></el-input>
        </el-form-item>
          <el-form-item label="网费详情" prop="dsInternetBillDetail">
            <el-input size="mini" class="item_reset" v-model="dsItem.dsInternetBillDetail" :disabled="editFlag"></el-input>
          </el-form-item>


        </el-form>
        <div class="ui-detail-btus">
          <el-button size="mini" @click="editFlag=false" v-if="editFlag">编辑</el-button>
          <el-button size="mini" @click="cancelEdit" v-else>取消</el-button>
          <el-button type="primary" size="mini" @click="saveItem" :disabled="editFlag">保存</el-button>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  export default {
    name: 'dormitoryServiceDetail',
    data() {
      return {
        dsId: this.$route.query.dsId,
        dsItem: {
          dsId: '',
          // dsMonth: '',
          dsElectricBill: '',
          dsElectricBillDetail:'',
          dsWaterBill: '',
          dsWaterBillDetail: '',
          dsInternetBill: '',
          dsInternetBillDetail: '',
          dsDorHygiene: '',
          dsDorHygieneDetail:'',
          buildingNo: '',
          dorNo: '',
          status: ''
        },
        editFlag: true,

      }
    },
    created() {
      this.getDs()
    },
    methods: {
      back() {
        console.log(this.$route)
        this.$router.back(-1);
      },
      cancelEdit() {
        this.editFlag = !this.editFlag;
        // this.getItem()
      },
      isAdmin() {
        let userInfo = this.$getGlobal.getItem('userInfo')
        console.log(userInfo)
        if (userInfo.roleId !== '1' && userInfo.roleId !== "2") {
          this.$confirm('此操作仅限超级管理员使用,普通用户请前去个人中心修改密码', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          }).then(() => {
          }).catch(() => {
          })
        }
      },
      getDs() {
        post(`/pms_api/dormitoryService/detail`, {'dsId': this.dsId}).then(res => {
          this.dsItem = res.data[0]
        }).catch(err => {
          console.log(err)
        })
      },
      saveItem() {
        post(`/pms_api/dormitoryService/edit`, this.dsItem).then(res => {
          this.cancelEdit()
          this.getDs()
        }).catch(err => {
          console.log(err)
        })
      },
      //表格居中
      cellStyle({row, colum, rowIndex, columIndex}) {
        return "text-align: center";
      },
      rowClass({row, rowIndex}) {
        return "text-align: center";
      }
    }
  }
</script>
